<script setup lang="ts">
  import useCheckFlowTemplateListService from '@/services/pages/base-info/useCheckFlowTemplateListService'
  import FormModal from './form-modal.vue'
  import { ref } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { deleteCheckFlowTemplateById } from '@/api/basic'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import EditTemplateProcessModal from './edit-template-process-modal.vue'
  import useCheckFlowTemplateStatusUpdateService from '@/services/pages/base-info/useCheckFlowTemplateStatusUpdateService'
  import useGetEnabledCheckFlowTemplateService from '@/services/pages/base-info/useGetEnabledCheckFlowTemplateService'

  const {
    enabledCheckFlowTemplate,
    getEnabledCheckFlowTemplateLoading,
    getEnabledCheckFlowTemplate,
  } = useGetEnabledCheckFlowTemplateService()
  const { enableCheckFlowTemplateLoading, enableCheckFlowTemplate } =
    useCheckFlowTemplateStatusUpdateService()
  const { checkFlowTemplateList, getCheckFlowTemplateListLoading, getCheckFlowTemplateList } =
    useCheckFlowTemplateListService()

  defineOptions({
    name: 'CheckFlowTemplateList',
  })

  const formModalVisible = ref(false)
  const currentOperateId = ref('')
  const editTemplateProcessModalVisible = ref(false)

  const getList = async () => {
    await getCheckFlowTemplateList()
    await getEnabledCheckFlowTemplate()
  }

  const handleEditTemplateProcessClick = (data: BaseInfoAPIResponse.CheckFlowTemplateListItem) => {
    currentOperateId.value = data.id.toString()
    editTemplateProcessModalVisible.value = true
  }

  const handleEditClick = (data: BaseInfoAPIResponse.CheckFlowTemplateListItem) => {
    currentOperateId.value = data.id.toString()
    formModalVisible.value = true
  }

  const handleEnableTemplate = (data: BaseInfoAPIResponse.CheckFlowTemplateListItem) => {
    enableCheckFlowTemplate(String(data.id)).then((res) => {
      if (res) {
        if (res.code === 20000) {
          HMessage.success('操作成功')
          getList()
        } else {
          HMessageBox.error(res.message)
        }
      } else {
        HMessageBox.error('启用失败，请稍后重试')
      }
    })
  }

  const handleDeleteClick = (data: BaseInfoAPIResponse.CheckFlowTemplateListItem) => {
    ElMessageBox({
      title: '提示',
      message: '确定删除该模板吗？',
      autofocus: false,
      showCancelButton: true,
      type: 'warning',
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await deleteCheckFlowTemplateById(data.id)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false

            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              done()
              getList()
              return
            }

            HMessageBox.error(res.data.message)
          } catch (e) {
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            HMessageBox.error('删除失败，请稍后重试')
          }
          return
        }

        done()
      },
    })
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div
    v-loading="
      getCheckFlowTemplateListLoading ||
      enableCheckFlowTemplateLoading ||
      getEnabledCheckFlowTemplateLoading
    "
    class="check-flow-template-component"
  >
    <div class="header">
      <div class="btn-group">
        <h-plain-button @click="formModalVisible = true">添加模板</h-plain-button>
      </div>
      <div class="search"></div>
    </div>
    <div class="table">
      <el-table :data="checkFlowTemplateList" :border="true" :stripe="true">
        <!-- 序号 -->
        <el-table-column width="50" label="序号" type="index" :align="'center'" fixed="left" />

        <!-- 模板名称 -->
        <el-table-column width="160" show-overflow-tooltip label="模板名称" prop="name" />

        <!-- 模板编码 -->
        <el-table-column width="160" show-overflow-tooltip label="模板编码" prop="code" />

        <!-- 描述 -->
        <el-table-column min-width="160" show-overflow-tooltip label="描述" prop="description" />

        <!-- 状态 -->
        <el-table-column width="80" label="状态">
          <template #default="{ row }">
            <h-status v-if="String(row.id) === enabledCheckFlowTemplate.flowTemplateEntity.id">
              启用
            </h-status>
            <h-status v-else type="info">禁用</h-status>
          </template>
        </el-table-column>

        <!-- 创建时间 -->
        <el-table-column width="150" label="创建时间" prop="gmtCreate" />

        <!-- 更新时间 -->
        <el-table-column width="150" label="更新时间" prop="gmtUpdate" />

        <!-- 操作 -->
        <el-table-column width="220" label="操作" fixed="right">
          <template #default="{ row }">
            <h-space>
              <h-link
                v-if="String(row.id) === enabledCheckFlowTemplate.flowTemplateEntity.id"
                disabled
              >
                启用
              </h-link>
              <h-link v-else @click="handleEnableTemplate(row)">启用</h-link>
              <h-link type="error" @click="handleDeleteClick(row)">删除</h-link>
              <h-link @click="handleEditClick(row)">编辑</h-link>
              <h-link @click="handleEditTemplateProcessClick(row)">编辑模板流程</h-link>
            </h-space>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <form-modal
      v-model="formModalVisible"
      :template-id="currentOperateId"
      @update="getList"
      @close="currentOperateId = ''"
    />

    <edit-template-process-modal
      v-model="editTemplateProcessModalVisible"
      :template-id="currentOperateId"
      @close="currentOperateId = ''"
      @update="getList"
    />
  </div>
</template>

<style scoped lang="scss">
  .check-flow-template-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 4px;

    .header {
      display: flex;
      justify-content: space-between;
    }

    .table {
      max-height: calc(100% - 32px);
    }
  }
</style>
